
<script setup>
import { getGoodsInfoService } from '@/api/goods'
import { OneShopCartService, UpdateShopCartService, AddShopCartService } from '@/api/shopcart'
// 引入图标
import { CircleCheck } from '@element-plus/icons-vue'
// 使用路由获取路径参数
import { useRoute } from 'vue-router'
// 引入用户仓库
import { useUser, useShopcart } from '@/stores/index'
import { ref } from 'vue'
// 创建 route 实例
const route = useRoute()
// 创建用户仓库实例
const userStore = useUser()
const shopcartStore = useShopcart()

// 存放路径传递过来的商品id
const goods_id = ref('')

// 商品数据信息存放
const goodsInfo = ref({})

// 调用接口获取商品信息
const getGoodsInfo = async () => {
  goods_id.value = route.query.goodsId
  const { data: { data } } = await getGoodsInfoService(goods_id.value);
  goodsInfo.value = data
}

getGoodsInfo()

// 加入购物车
const addCart = async (goodsId) => {
  // 判断用户是否登录 查看是否存入用户id值
  if (!userStore.user.user_id) {
    userStore.setShowLogin(true)
    // console.log('还未进行登录');
    ElNotification({
      title: 'Warning',
      message: '您当前还未进行登录请先进行登录',
      type: 'warning',
    })
    return
  }
  // console.log('已经登录');
  const userId = userStore.user.user_id
  const { data } = await OneShopCartService(userId, goodsId)
  // 根据后端返回回来的数据进行判断
  // 当前商品是否已经存在了购物车
  // true => 调用 update 接口
  // false => 调用 add 接口
  if (data.success) {
    // true
    const { data } = await UpdateShopCartService(userId, goodsId)
    // console.log(data)
    if (data.success) {
      // 代表更新商品数量+1成功
      ElMessage({
        showClose: true,
        message: data.message,
        type: 'success',
      })
      // 立马更新前端显示数据信息
      shopcartStore.loadShopcartList()
    } else {
      // false
      ElMessage({
        showClose: true,
        message: data.message,
        type: 'error',
      })
    }
  } else {
    // false
    // 就先将商品添加进购物车
    const { data } = await AddShopCartService(userId, goodsId)
    if (data.success) {
      ElMessage({
        showClose: true,
        message: data.message,
        type: 'success',
      })
      // 立马更新前端显示数据信息
      shopcartStore.loadShopcartList()
    } else {
      ElMessage({
        showClose: true,
        message: data.message,
        type: 'error',
      })
    }
  }
}

</script>

<template>
  <div class="page">
    <div class="detail-header">
      <div class="content">
        <div class="name">{{goodsInfo.goodsName}}</div>
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>用户评价</li>
        </ul>
      </div>
    </div>
    <div class="detail-content">
      <div class="swiper">
        <el-carousel trigger="click" height="560px">
          <el-carousel-item>
            <img style="width:560px;" :src="goodsInfo.goodsImg" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="content">
        <h1 class="name">{{goodsInfo.goodsName}}</h1>
        <p class="intro">商品数量 : {{goodsInfo.count}}</p>
        <p class="store">店铺名称</p>
        <div class="price">
          <span>{{goodsInfo.price}}元</span>
          <span class="del">{{goodsInfo.price}}元</span>
        </div>
        <div class="pro-list">
          <span class="pro-name">{{goodsInfo.goodsName}}</span>
          <span class="pro-price">
            <span>最低售价{{goodsInfo.price}}元</span>
            <span class="pro-del">{{goodsInfo.price}}元</span>
          </span>
          <p class="price-sum">总计 : {{goodsInfo.price}}元</p>
        </div>
        <div class="button">
          <el-button class="shop-cart" @click="addCart(goodsInfo.goodsId)">加入购物车</el-button>
          <el-button class="like">喜欢</el-button>
        </div>
        <ul class="pro-policy">
          <li><el-icon>
              <CircleCheck />
            </el-icon> 月光奶茶</li>
          <li><el-icon>
              <CircleCheck />
            </el-icon> 月光奶茶发货</li>
          <li><el-icon>
              <CircleCheck />
            </el-icon> 24小时无理由退货</li>
          <li><el-icon>
              <CircleCheck />
            </el-icon> 24小时价格保护</li>
        </ul>
      </div>
    </div>
  </div>
</template>

// 样式布局
<style lang="less" scoped>
.page {
  background-color: white;
}
.detail-header {
  height: 44px;
  box-shadow: 0 5px 5px rgb(0 0 0 / 7%);
  .content {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 18px;
      font-weight: 400;
      color: #212121;
    }
    ul {
      display: flex;
      li {
        font-size: 14px;
        color: #616161;
        margin-left: 20px;
        cursor: pointer;
        &:hover {
          color: #ff6700;
        }
      }
    }
  }
}
.detail-content {
  width: 1226px;
  margin: 0 auto;
  display: flex;
  padding-top: 30px;
  .swiper {
    width: 560px;
    height: 560px;
  }
  .content {
    margin-left: 25px;
    width: 640px;
    .name {
      height: 30px;
      line-height: 30px;
      font-size: 24px;
      font-weight: 400;
      color: #212121;
    }
    .intro {
      color: #b0b0b0;
      padding-top: 10px;
    }
    .store {
      color: #ff6700;
      padding-top: 10px;
    }
    .price {
      display: block;
      font-size: 18px;
      color: #ff6700;
      border-bottom: 1px solid #e0e0e0;
      padding: 25px 0 25px;
      .del {
        font-size: 14px;
        margin-left: 10px;
        color: #b0b0b0;
        text-decoration: line-through;
      }
    }
    .pro-list {
      background: #f9f9fa;
      padding: 30px 60px;
      margin: 50px 0 50px;
      .pro-name {
        line-height: 30px;
        color: #616161;
      }
      .pro-price {
        float: right;
        span {
          line-height: 30px;
          color: #616161;
        }
        .pro-del {
          margin-left: 10px;
          text-decoration: line-through;
        }
      }
      .price-sum {
        color: #ff6700;
        font-size: 24px;
        padding-top: 20px;
      }
    }
    .button {
      height: 55px;
      margin: 10px 0 20px 0;
      display: flex;
      .el-button {
        height: 55px;
        font-size: 16px;
        color: #fff;
        border: none;
        text-align: center;
      }
      .shop-cart {
        width: 340px;
        background-color: #ff6700;
      }
      .like {
        width: 260px;
        margin-left: 40px;
        background-color: #b0b0b0;
      }
    }
    .pro-policy {
      display: flex;
      li {
        margin-right: 20px;
        color: #b0b0b0;
      }
    }
  }
}
</style>